'use strict';

import React, { Component } from 'react';

import {
	StyleSheet,
	Text,
	View
} from 'react-native';

import Touchable from './Touchable';
import Timer from './Timer';

export default class Header extends Component < {} > {
	constructor(props) {
		super(props)
		this.state = {
			paused: true,

		}
	}
	componentWillMount() {

	}
	//暂停计时器
	paused() {
		this.setState(previousState => {
			return { paused: !previousState.paused };
		});
	}
	//召唤菜单
	menu() {
		this.setState({
			paused: true,
		})
		this.props.showMenu();
	}
	render() {
		const status = this.state.paused ? "开始" : "暂停";
		return(
			<View style={styles.container}>
		      	<Touchable onPress={this.menu.bind(this)}>
	        		<Text style={styles.fontColor}>菜单</Text>
	        	</Touchable>
	        	<Timer paused={this.state.paused} style={styles.fontColor}/>
	        	<Touchable onPress={this.paused.bind(this)}>
	        		<Text style={styles.fontColor}>{status}</Text>
	        	</Touchable>
		  </View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		marginTop:50,
		flexDirection: 'row',
		justifyContent: 'space-around',
	},
	fontColor: {
		color: 'white',
	}

});